<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-21 13:45:07
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-21 15:18:46
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\TemplateDetail\components\TemplateVideo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
const props = defineProps({
  showControls: {
    type: Boolean,
    default: true,
  },
  videoUrl: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <div class="video_box_content">
    <video :controls="props.showControls" :src="videoUrl"></video>
  </div>
</template>

<style lang="less" scoped>
.video_box_content {
  position: relative;
  background-color: #1e1e1e;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
  }
}
</style>
